<template>
  <div class="editinfo">
    <hmNavBar
      :path="path"
      :title="typeList[type]"
      :right="right"
      @rightClick="save"
    ></hmNavBar>
    <div class="content">
      <van-field
        v-if="type !== 'avatar'"
        v-model="inputValue"
        class="field"
      ></van-field>
      <van-uploader
        v-else
        v-model="imgArrey"
        max-count="1"
        :before-read="beforeRead"
        :after-read="afterRead"
        @delete="deleteAvatar"
      ></van-uploader>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { auEdit, auUpload } from '@/api/my'
export default {
  data () {
    return {
      inputValue: '',
      right: '',
      //   箭头回跳的路由不写死,因为岗位跳的不是同一个路由
      path: '/home/myInfo',
      //   接收路由跳转过来的参数type
      type: this.$route.query.type,
      typeList: {
        nickname: '修改昵称',
        intro: '修改个人简历',
        position: '我的岗位',
        avatar: '修改头像'
      },
      // 上传头像是个数组
      imgArrey: []
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  watch: {
    //   监听inputValue值
    //   新的值不等于vuex里保存的名字同时不可以为空,就证明修改了显示保存,否则不显示
    inputValue (newVal) {
      if (newVal !== this.userInfo[this.type] && newVal !== '') {
        this.right = '保存'
      } else {
        this.right = ''
      }
    }
  },
  created () {
    //   因为先有data才能有computed,所以data无法使用计算机属性
    // 在这里修改inputValue,一进去就显示用户信息的名字
    this.inputValue = this.userInfo[this.type]
    // 如果type的参数等于position说明是从我的岗位页面来的,修改跳转的路由
    if (this.type === 'position') {
      this.path = '/home/my'
    }
    // 图片回显,要考虑没有用户头像
    if (this.type === 'avatar' && this.userInfo.avatar) {
      this.imgArrey[0] = { url: this.$baseUrl + this.userInfo.avatar }
    }
  },
  methods: {
    async save () {
      // 加载中
      this.$toast.loading({
        duration: 0
      })
      const res = await auEdit({
        [this.type]: this.inputValue
      })
      console.log(res)
      //   提示成功
      this.$toast.success('保存成功')
      //   刷新
      this.$store.dispatch('refreshUserInfo')
      //   回跳到myInfo页
      this.$router.push(this.path)
    },
    // 头像上传前,给类型和大小限制
    beforeRead (file) {
      console.log(file)
      const _type = file.type === 'image/png' || file.type === 'image/jpeg'
      const _size = file.size / 1024 / 1024 < 2
      if (!_type) {
        this.$toast.fail('上传的图片只能是png/jpeg格式')
      }
      if (!_size) {
        this.$toast.fail('上传的图片不能大于2mb')
      }
      // 返回一个布尔值
      return _type && _size
    },
    // 上传成功号,调用接口
    async afterRead (res) {
      // console.log(res)
      // 上传的图片要求是formDate格式
      const _formData = new FormData()
      _formData.append('files', res.file)
      this.$toast.loading({
        message: '上传中...',
        duration: 0
      })

      const res2 = await auUpload(_formData)
      this.inputValue = res2.data.data[0].id
      this.$toast.success('上传成功')
      // console.log(res2)
    },
    // 删除图片,让inputValue等于空,保存消失
    deleteAvatar () {
      this.inputValue = ''
    }
  }
}
</script>
<style lang="less" scoped>
.editinfo {
  .content {
    padding: 34px @p15 0;
    text-align: center;
    .field {
      background-color: #f7f4f5;
    }
  }
}
</style>
